<template>
	<view class="big-box flex-col align-center">
		<top-navigation bgColor='#FFFFFF00' :isBack="true">
			<text slot='center-slot' class="center-slot">我的保管箱</text>
			<view slot='right-slot' class="right-slot" @tap="$navto('/pages/mine/appCenter/mySafeBox/mySafeBoxLog')">
				记录
			</view>
		</top-navigation>
		<u-toast ref="uToast"></u-toast>
		<view class="top-box">
			<view class="justify-between">
				<view class="">
					<view class="my-qing-long">
						我暂存的商品<text class="unit">(个)</text>
					</view>
					<view class="long-num">
						{{total}}
					</view>
				</view>
				<view class="" @tap="getDelivery">
					<view class="tihuo-btn justify-center align-center">
						提货
					</view>
					<view class="tihuo-btn-tip">
						同类型的商品一次提货
					</view>
				</view>
			</view>
			<!-- <view class="tips">
				提货是通知仓库把购买的商品快递到家，不支持取消
			</view> -->
		</view>
		<view class="good-box justify-start flex-wrap">
			<view class="longdan-box flex-col align-center" v-for="v,k in eggInfoList" @tap="openEgg(v)">
				<image class="longdan" :src="v.image" mode=""></image>
				<view class="name u-line-1">
					{{v.name}}
				</view>
				<view class="number">
					x{{v.total_num}}
				</view>
			</view>
		</view>



		<!-- 联系客服弹出层-->
		<u-popup :show="moneyShow" mode="center" @close="moneyShow=false" round="16rpx" bgColor='transparent'
			overlayOpacity='0.7'>
			<view class="popup-one-box flex-col align-center">
				<view class="has-shuijing justify-center">
					系统提示
				</view>
				<view class="has-shuijing-desc justify-center">
					实名认证后即可使用本功能
				</view>
				<view class=" justify-between">
					<view class="popup-box-btn align-center justify-center" @click="moneyShow=false">
						取消
					</view>
					<view class="popup-box-btn-1 align-center justify-center"
						@click="$navto('/pages/mine/appCenter/userRealName')">
						去实名
					</view>
				</view>


			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				total: '',
				current: 0,
				moneyShow: false,
				page: 1,
				pagesize: 0,
				totalpage: 0,
				eggInfoList: [

				],

			}
		},
		onLoad() {
			this.getIndex()
		},
		methods: {
			// 提货
			getDelivery() {
				if (this.total == 0) {
					this.$refs.uToast.show({
						message: '无法提货'
					})
					return
				}
				this.$navto('/pages/mine/appCenter/mySafeBox/takeStep1')
			},
			// 获取龙蛋数量和内容
			async getIndex() {
				let url = '/api/v1/my_box'
				let {
					code,
					msg,
					data
				} = await this.$getRequest(url)
				if (code == 200) {
					console.log(data, '静态资源');
					this.eggInfoList = data.list || []
					this.total = data.total
					let arr = 0
					this.eggInfoList.map(item => {
						arr += Number(item.total_num)
					})
					this.empy = arr
				} else {
					this.$refs.uToast.show({
						message: msg
					})
				}
			},
			goGive() {
				console.log("uni.getStorageSync('userInfo').auth", uni.getStorageSync('userInfo'));
				// 去赠送
				// 需要修改bs
				if (uni.getStorageSync('userInfo').auth != 0) {
					// 没有实名认证需要弹窗
					this.moneyShow = true
				} else {
					this.$navto('/pages/mine/myOre/oreGive')
				}
			},
			// 应用中心
			getCategory(value) {
				switch (value) {
					case 0:
						// 邀请好友
						this.$navto('/pages/mine/appCenter/inviteFriends')
						break;
					default:
						break;
				}
			},
			myCopy(value) {
				let _this = this
				//提示模板
				uni.setClipboardData({
					data: value, //要被复制的内容
					showToast: false,
					success: () => { //复制成功的回调函数
						_this.$refs.uToast.show({
							message: '已复制',
							type: 'default',
							duration: '500'

						})
						// uni.showToast({ //提示
						// 	title: wxorqq == 'w' ? "微信号已复制" : 'QQ号已复制'
						// })
					}
				});
			},
			bannerTap() {
				// banner点击
			},
			bannerChange() {
				// banner改变
			},
			featureTap(e) {
				this.moneyShow = true
			}
		}
	}
</script>
<style>
	@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
	.big-box {
		min-height: 100vh;
		background: url('/static/images/mine/my_bg.png') #16161e no-repeat top center / 100% 668rpx;

		// padding: 0 32rpx 60rpx;
		.center-slot {
			color: #FFF;

		}

		.right-slot {
			color: #FFF;
			font-size: 26rpx;

		}

		.good-box {
			width: 100%;
			padding: 0 0 0 40rpx;
		}

		.longdan-box {
			width: 197rpx;
			padding-bottom: 15rpx;
			background: #21202E;
			margin:0 40rpx 30rpx 0;

			.longdan {
				width: 197rpx;
				height: 197rpx;
			}

			.name {
				margin-top: 20rpx;
				color: #FFF;
				font-size: 25rpx;
				font-weight: bold;
			}

			.number {
				margin-top: 18rpx;
				color: #FFF;
				font-size: 27rpx;
				font-weight: bold;
			}
		}

	}


	.popup-one-box {
		position: relative;
		z-index: 7;
		width: 560rpx;
		border-radius: 16rpx;
		background: #1D1D1D;
		padding: 48rpx 40rpx;

		.has-shuijing {
			width: 100%;
			height: 44rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			margin-bottom: 24rpx;
		}

		.has-shuijing-desc {
			color: rgba(255, 255, 255, .6);
			font-size: .75rem;
			line-height: 1.125rem;
			margin-bottom: 48rpx;
		}

		.shui-ji-num {
			font-size: 28rpx;
			color: #FFF;
			font-weight: 700;
		}

		.popup-box-btn {
			width: 227rpx;
			height: 72rpx;
			background: #252727;
			color: rgba(255, 255, 255, .4);
			font-size: 28rpx;
			border-radius: 8rpx;
		}

		.popup-box-btn-1 {
			width: 227rpx;
			height: 72rpx;
			background: #27FF92;
			color: #000;
			font-size: 28rpx;
			margin-left: 24rpx;
			border-radius: 8rpx;
		}




		.popup-kuangshi {
			width: 56rpx;
			height: 36rpx;
		}







	}

	.top-box {
		color: #FFF;
		width: 100%;
		position: relative;
		margin: 0rpx auto 26rpx;
		padding: 48rpx;
		border-radius: 16rpx;

		.tips {
			margin-top: 1rem;
			padding: .375rem .375rem .375rem .5rem;
			border-radius: .25rem;
			background-color: #20202c;
			font-size: 22rpx;
			color: #FFFFFF99;
		}

		.my-ore-tips {
			margin-top: 120rpx;
			width: 100%;
		}

		.long-baby {
			position: absolute;
			bottom: 0;
			right: 0;
			width: 232rpx;
			height: 232rpx;
		}

		.tihuo-btn-tip {
			padding: .25rem 0;
			text-align: center;
			font-size: 20rpx;
			color: #fff;
			background: #292838;
			border-radius: 8rpx;
		}

		.tihuo-btn {
			border-radius: 8rpx;
			width: 240rpx;
			height: 72rpx;
			background: #27FF92;
			border-bottom: .125rem solid #00A351;
			color: #000;
			font-size: .9375rem;
			font-weight: 700;
		}

		.my-qing-long {
			color: #FFFFFF99;
			font-size: 24rpx;
		}



		.long-num {
			margin-top: 24rpx;
			font-size: 72rpx;
			color: #27ff92;
			position: relative;

			.sjb {
				position: absolute;
				width: 90rpx;
				height: 90rpx;
				right: 0;
				top: 0;
			}

			.unit {
				margin-left: 15rpx;
				font-size: 24rpx;
				color: #FFFFFF99;
			}
		}
	}
</style>